<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test8</title>
    <style>
        .div-buttom,.div-top{
            margin: 20px;
            display: flex;
            flex-flow:row nowrap;
            align-items: center;
            justify-content: center;
            border: 1px solid black;
            width: 1000px;
            height: 250px;
        }
        .div-center{
            margin-left: 10px;
            width: 50px;
            height: 200px;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-1{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            width: 280px;
            height: 200px;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-2{
            margin:0 5px;
            display: flex;
            align-items: center;
            justify-content:center;
            width: 100px;
            height: 150px;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-3{
            margin:0 2px;
            width: 40px;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="div-top" id="div-top">
    n1
    <div class="div-buttom-top-left-right-1" >n2
        <div class="div-buttom-top-left-right-2" >n3
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
        </div>
        <div class="div-buttom-top-left-right-2" >n3
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
        </div>
    </div>
    <div class="div-center">n5</div>
    <div class="div-buttom-top-left-right-1" >n2
        <div class="div-buttom-top-left-right-2" >n3
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
        </div>
        <div class="div-buttom-top-left-right-2" >n3
            <div class="div-buttom-top-left-right-3" >n4</div>
            <div class="div-buttom-top-left-right-3" >n4</div>
        </div>
    </div>
    <div class="div-buttom-top-left-right-1" >n2
        <div class="div-buttom-top-left-right-2" >n3</div>
        <div class="div-buttom-top-left-right-2" >n3</div>
    </div>
</div>
<div class="btn">
    <button type="button">深度优先遍历</button>
    <input type="text" id="search_text">
    <button type="button">深度优先查询</button>
</div>

<script>
    (function(){
        var div_top = document.getElementsByClassName("div-top")[0],
            btn= document.getElementsByTagName("button")[0],
            text = document.getElementById("search_text"),
            search_text = document.getElementsByTagName("button")[1],
            arr = [],
            timer = null,
            flag;

        function traverseDF(node){
            if(!(node == null)){
                arr.push(node);
                for(var i=0;i<node.children.length;i++){
                    traverseDF(node.children[i]);
                }
            }
        }

        function changeColor(){
            if(arr.length>0){
                var i = 0;
                arr[i].style.backgroundColor = "red";
                timer = setInterval(function(){
                    if(i<arr.length-1){
                        i++;
                        arr[i-1].style.backgroundColor = "#fff";
                        arr[i].style.backgroundColor = "red";
                    }else{
                        arr[i].style.backgroundColor = "#fff";
                        clearInterval(timer);
                    }
                },500);
            }
        }

        function search(match){
            if(match == ""){
                alert("请输入查询条件！");
                return false;
            }
            var reg = new RegExp(match,"g");
            if(arr.length>0){
                var i = 0;
                arr[i].style.backgroundColor = "red";
                timer = setInterval(function(){
                    i++;
                    if(i<arr.length){
                        if((arr[i-1].childNodes[0].nodeValue).match(reg)){
                            arr[i-1].style.backgroundColor = "blue";
                            flag++;
                            arr[i].style.backgroundColor = "red";
                        }else{
                            arr[i-1].style.backgroundColor = "#fff";
                            arr[i].style.backgroundColor = "red";
                        }
                    }else{
                        if((arr[i-1].childNodes[0].nodeValue).match(reg)){
                            arr[i-1].style.backgroundColor = "blue";
                            flag++;
                            clearInterval(timer);
                        }else{
                            arr[i-1].style.backgroundColor = "#fff";
                            if(flag == 0){
                                alert("没有找到输入的值");
                            }
                            console.log(flag);
                            clearInterval(timer);
                        }
                    }
                },500);
            }
        }
        btn.onclick = function(){
            reset();
            traverseDF(div_top);
            changeColor();
        }

        search_text.onclick = function(){
            var str_search = text.value.trim();
            reset();
            traverseDF(div_top);
            search(str_search);
        }

        function reset(){
            arr = [];
            clearInterval(timer);
            var divs = document.getElementsByTagName("div");
            for(var i=0;i<divs.length;i++){
                divs[i].style.backgroundColor = "#fff";
            }
            flag = 0;
        }
    })();
</script>
</body>
</html>